<template>
    <div class="bac-container-none-padding update-password-container">
        <div class="bac-container-title">修改密码</div>
        <el-form label-width="80px" size="small" class="main-form" ref="formPassword" :rules="phoneRules"
                 :model="params">
            <el-form-item label="新密码" prop="newPassword">
                <el-input type="password" v-model="params.newPassword"></el-input>
            </el-form-item>
            <el-form-item label="确定密码" prop="confirmPassword">
                <el-input type="password" v-model="params.confirmPassword"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="openDialog">修改</el-button>
            </el-form-item>

        </el-form>
        <el-dialog
                title="输入验证码"
                :visible.sync="dialogVisible"
                width="30%">
            <el-form label-width="80px" size="medium" class="dialog-form" ref="formPhone" :rules="phoneRules"
                     :model="params" v-loading="loading">
                <el-form-item label="手机号码" prop="phone">
                    <el-input v-model="params.phone"></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="validateCode">
                    <el-input style="width: 150px;margin-right: 10px" v-model="params.validateCode"></el-input>
                    <el-button @click="getValidateCode">{{getValidateCodeTime == null ?
                        '点击获取':getValidateCodeTime +'s后获取'}}
                    </el-button>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submit">确定</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
    import md5 from 'js-md5';

    export default {
        data: function () {
            let checkPhone = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('手机号不能为空'));
                } else {
                    const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                    if (reg.test(value)) {
                        callback();
                    } else {
                        return callback(new Error('请输入正确的手机号'));
                    }
                }
            };

            let checkPassword = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('密码不能为空'));
                } else {
                    const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                    if (reg.test(value)) {
                        callback();
                    } else {
                        return callback(new Error('请输入正确的手机号'));
                    }
                }
            };
            let validatePass = (rule, value, callback) => {
                if (!value) {
                    callback(new Error('请输入新密码'));
                } else if (value.toString().length < 6 || value.toString().length > 18) {
                    callback(new Error('密码长度为6 - 18个字符'))
                } else {
                    callback();
                }
            };
            let validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.params.newPassword) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                loading: false,
                dialogVisible: false,
                params: {},
                getValidateCodeTime: null,
                phoneRules: {
                    phone: [
                        {validator: checkPhone, trigger: 'blur'}
                    ],
                    newPassword: [
                        {required: true, validator: validatePass, trigger: 'blur'}
                    ],
                    confirmPassword: [
                        {required: true, validator: validatePass2, trigger: 'blur'}
                    ],
                    validateCode: [
                        {required: true, message: '请输入验证码', trigger: 'change'},
                        {min: 4, max: 4, message: '请输入4位验证码', trigger: 'change'}
                    ]
                }

            }
        },
        methods: {
            openDialog() {
                this.$refs["formPassword"].validate((valid) => {
                    if (valid) {
                        this.dialogVisible = true;
                    } else {
                        return false;
                    }
                });

            },
            getValidateCode() {
                if (this.params.phone == null) {
                    return;
                }
                if (this.getValidateCodeTime != null) {
                    return;
                }
                this.$post("/user/getVerificationCodeTest", {phone: this.params.phone}).then((res) => {
                    this.getValidateCodeTime = 60;
                    let inter = setInterval(() => {
                        this.getValidateCodeTime = this.getValidateCodeTime - 1;
                        if (this.getValidateCodeTime <= 0) {
                            clearInterval(inter);
                            this.getValidateCodeTime = null;
                        }
                    }, 1000);

                }).catch(err => {
                    console.log(err)
                })

            },
            submit() {
                this.$refs['formPhone'].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        let params = JSON.parse(JSON.stringify(this.params));
                        params.newPassword = md5(this.params.newPassword)
                        params.confirmPassword = md5(this.params.confirmPassword)
                        this.$post("/user/updatePassword", params).then((res) => {
                                this.params = {};
                                this.dialogVisible = false;
                                this.$notify({offset: 60, title: '成功', message: '修改成功', type: 'success'});
                            this.loading = false;
                        }).catch(err => {
                            this.loading = false;
                            console.log(err)
                        })
                    }
                });
            }
        }
    }
</script>

<style>
    .update-password-container .main-form {
        width: 50%;
    }

    .dialog-form .el-input {
        width: 70%;
    }
</style>